---
# title: "Cursor"
title: "光标效果"
# description: "Utilities for controlling the cursor style when hovering over an element."
description: "当鼠标悬停在一个元素上时，用于控制光标样式的功能类。"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/cursor'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Auto -->
## 自动

<!-- Use `cursor-auto` to allow the browser to change the cursor based on the current content (e.g. automatically change to `text` cursor when hovering over text). -->
使用 `cursor-auto` 允许浏览器根据当前的内容改变光标（例如，当鼠标悬停在文本上时，自动变为 `text` 光标）。

```html rose
<template preview>
  <div class="cursor-auto max-w-xs p-2 bg-rose-200 mx-auto text-center">
    Hover over this text
  </div>
</template>

<div class="**cursor-auto** ...">
  Hover over this text
</div>
```

<!-- ## Default -->
## 默认

<!-- Use `cursor-default` to change the mouse cursor to always use the platform-dependent default cursor (usually an arrow). -->
使用 `cursor-default` 来改变鼠标光标，使其始终使用依赖于平台的默认光标（通常是一个箭头）。

```html amber
<template preview>
  <div class="cursor-default max-w-xs p-2 bg-amber-200 mx-auto text-center">
    Hover over this text
  </div>
</template>

<div class="**cursor-default** ...">
  Hover over this text
</div>
```

<!-- ## Pointer -->
## 指向

<!-- Use `cursor-pointer` to change the mouse cursor to indicate an interactive element (usually a pointing hand). -->
使用 `cursor-pointer` 来改变鼠标光标来表示一个交互式元素（通常是一个指向性的手）。

```html purple
<template preview>
  <div class="cursor-pointer max-w-xs p-2 bg-purple-200 mx-auto text-center">
    Hover me
  </div>
</template>

<div class="**cursor-pointer** ...">
  Hover me
</div>
```

<!-- ## Wait -->
## 等待

<!-- Use `cursor-wait` to change the mouse cursor to indicate something is happening in the background (usually an hourglass or watch). -->
使用 `cursor-wait` 来改变鼠标光标，以表示背景中正在发生的事情（通常是沙漏或手表）。

```html emerald
<template preview>
  <div class="cursor-wait max-w-xs p-2 bg-emerald-200 mx-auto text-center">
    Hover me
  </div>
</template>

<div class="**cursor-wait** ...">
  Hover me
</div>
```

<!-- ## Text -->
## 文本

<!-- Use `cursor-text` to change the mouse cursor to indicate the text can be selected (usually an I-beam shape). -->
使用 `cursor-text` 来改变鼠标光标，表示可以选择文本（通常是一个 I 字形）。

```html fuchsia
<template preview>
  <div class="cursor-text max-w-xs p-2 bg-fuchsia-200 mx-auto text-center">
    Hover me
  </div>
</template>

<div class="cursor-text ...">
  Hover me
</div>
```

<!-- ## Move -->
## 移动

<!-- Use `cursor-move` to change the mouse cursor to indicate something that can be moved. -->
使用 `cursor-move` 来改变鼠标光标，表示可以移动的东西。

```html indigo
<template preview>
  <div class="cursor-move max-w-xs p-2 bg-indigo-200 mx-auto text-center">
    Hover me
  </div>
</template>

<div class="**cursor-move** ...">
  Hover me
</div>
```

<!-- ## Not Allowed -->
## 不允许

<!-- Use `cursor-not-allowed` to change the mouse cursor to indicate something can not be interacted with or clicked. -->
使用 `cursor-not-allowed` 来改变鼠标光标，表示不能与之交互或点击。

```html lightBlue
<template preview>
  <div class="cursor-not-allowed max-w-xs p-2 bg-light-blue-200 mx-auto text-center">
    Hover me
  </div>
</template>

<div class="**cursor-not-allowed** ...">
  Hover me
</div>
```

<!-- ## Customizing -->
## 自定义

### Cursors

<!-- By default Tailwind provides six `cursor` utilities. You change, add, or remove these by editing the `theme.cursor` section of your Tailwind config. -->
默认情况下，Tailwind 提供了六个 `cursor` 功能。您可以通过编辑您的 Tailwind 配置中的 `theme.cursor` 部分来改变，添加或删除这些功能。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      cursor: {
        auto: 'auto',
        default: 'default',
        pointer: 'pointer',
-       wait: 'wait',
        text: 'text',
-       move: 'move',
        'not-allowed': 'not-allowed',
+       crosshair: 'crosshair',
+       'zoom-in': 'zoom-in',
      }
    }
  }
```

<!-- ### Variants -->
### 变体

<Variants plugin="cursor" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="cursor" />
